/**
 * 可编辑数字输入
 * */
import React from 'react';
import { Form, InputNumber, Spin } from 'antd';
// import BizIcon from '@/components/BizIcon';
// import { primaryColor } from '@/defaultSettings';
import { Icon } from '../../../components';

const PeriodItem = ({ beforeStr, afterStr, afterNode, value, loading = false, disabled = false, onSave, style }) => {
    const [editing, setEditing] = React.useState(false);
    const [inputVal, setInputVal] = React.useState(value);

    const handleEdit = () => {
        setEditing(true);
    };

    const handleSave = () => {
        if (!inputVal) {
            return;
        }
        if (onSave) {
            onSave(inputVal);
        }
        setEditing(false);
    };

    const handleCancel = () => {
        setEditing(false);
    };

    React.useEffect(() => {
        setInputVal(value);
    }, [value, editing]);

    const centerStyle = { display: 'flex', alignItems: 'center', flexWrap: 'wrap' };

    return (
        <Spin spinning={loading}>
            <div style={{ height: 50, ...centerStyle, ...style }}>
                {beforeStr && <span style={{ color: 'rgba(0,0,0,0.85)' }}>{beforeStr}：</span>}
                {editing ? (
                    <Form.Item label="" validateStatus={inputVal ? '' : 'error'} style={{ marginBottom: 0 }}>
                        <InputNumber
                            value={inputVal}
                            min={1}
                            max={999}
                            precision={0}
                            placeholder="请输入"
                            onChange={setInputVal}
                        />
                    </Form.Item>
                ) : (
                    <span style={{ color: 'rgba(0,0,0,0.65)' }}>{value}</span>
                )}
                &nbsp;
                <span style={{ color: 'rgba(0,0,0,0.65)' }}>{afterStr}</span>
                &nbsp;&nbsp;
                <div style={{ marginRight: 8 }}>
                    {editing ? (
                        <div style={{ ...centerStyle, marginTop: 4 }}>
                            <Icon title="保存" type="confirm_o" onClick={handleSave} />
                            &nbsp;
                            <Icon title="取消" type="cancel_o" onClick={handleCancel} />
                        </div>
                    ) : (
                        !disabled && (
                            // <div
                            //     style={{ ...centerStyle, color: primaryColor, cursor: 'pointer' }}
                            //     onClick={handleEdit}
                            // >
                            //     <BizIcon
                            //         type="listfunction_edit_icon_default"
                            //         style={{ color: primaryColor, fontSize: 20, marginTop: 4 }}
                            //     />
                            //     修改
                            // </div>
                            <div style={{ ...centerStyle, marginTop: 4 }}>
                                <Icon title="编辑" type="listfunction_edit_icon_default" onClick={handleEdit} />
                            </div>
                        )
                    )}
                </div>
                {afterNode && <span style={{ color: 'rgba(0,0,0,0.65)' }}>{afterNode}</span>}
            </div>
        </Spin>
    );
};
export default Form.create()(PeriodItem);
